















Russell Brown, 
Senior Creative 
Director at 
Adobe Systems, 
shares some 
super tips and 
techniques for 
preparing 
images for the 
World Wide 
Web in Adobe’ 
Photoshop’ 4.0 
| INTERMEDIATE | 


Adobe 


OK, Web surfers. I have a great tip and technique just for you. 

I'm going to show you how to magically make a color in an indexed 
color image appear transparent in one area and opaque in another. 
"How can I use this?" you ask. Well, it's a great way to see through a 
background color but not disturb that same color inside the image. 

















1. Open an indexed color 
image that has a solid 
background that you want to 
remove. This image has a 
black background and black 
outlines inside the letter- 
forms. (If the background 
color doesn't also appear 
within your image, you dont 
need this technique. The 
tools in the GIF Export filter [45s | beet [play 
let you mask out any single 
color throughout the image.) 


2. Double-click the magic = SS podzilla & 13557. (Index) 
wand tool in the toolbox. 
This image has an anti- 
aliased edge, so increasing 
the tolerance ensures that 
the selection eats into the 
colored foreground edges 
and eliminates any black 


halo around the selection. 1 "d ra 
Here I chose a Tolerance of Tolerance: riae =) 

60 and, checked the Anti- [ S499 | Doc: eakriaek [RIOT Ecos 

aliased option. 

3. Now click all the areas in m — — — — gedzilla & 1555. Unden =E] Shortcuts 


Throughout this 
document, “Command/ 
Ctrl" means Command 
on the Macintosh and 
Ctrl on Windows. 


the image that you want to be 
transparent on your Web 
page. Remember, the Shift key 
lets you add to the selection; 
the Command/Ctrl key lets 
you subtract from the selec- 
tion. When everything that 
you want to be transparent is 
selected, choose Select > 


Inverse. In my image, this P sso» | Doc: 3k rie PIEI 
selects everything but the 


background. 





CREATING TRANSPARENT AREAS WITH A CHANNEL MASK 





4. Choose Select » Save 
Selection, and save this 
selection as a New channel. 


Click OK. 


Destination 


Document: | &odzillalndeu || 
Channel: | Aer k [*] 


üperation 
® New Channel 
(3 Add to Channel 


| 13459% | De O Subtract from Channel 


O Intersect with Channel 


5. Deselect (Command/ SS GIF 89a Export 
Ctrl+D). Then choose File > Zoom Level: 1:1 


Export > GIF89a Export. 
(Cancer| 


Interlace 
L] Export Caption 


Transparency 
Inde: Color 


Transparency From: | Selected Colors 
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6. Just to make sure you = gIF89a Export 
understand why we made the 
mask, let’s first use the 
eyedropper to select the 
background color in this 
image and make it transpar- 
ent. Aha! Our dilemma is NUR 
clear: All the blacks in the nuc 
image become transparent, | | 
including the outlines 
around the letterforms. 


Interlace 


L] Export Caption 





CREATING TRANSPARENT AREAS WITH A CHANNEL MASK 





7. Now for the simple solu- 
tion: Choose the channel you 
just created from the Trans- 
parency pop-up menu to 
load your background mask. 
In this example, my mask is 
in Channel £2. Notice how 
nicely the mask takes out the 
background without affect- 
ing the inner areas of the 
image. 


8. To create the GIF file, click 
OK to export the results. 
Notice that the name of the 
file has been appended with 
the extension .gif. Be sure to 
save your file with a nice 
short name with no spaces so 
that it's compatible across 
multiple computer environ- 
ments. 


9. Here 1s the final image 
placed in the Web page. 





BIF89àa Export 


doom Level: 1:1 


Cancel 


Interlace 
L] Export Caption 


Transparency 
Inde: Color 
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Godzilla's Home Page 
Location: (file :// Adobe /Desktop%20F older /Godzilla's%820Home htm] 


what's Mew? | What's Cool? | Handbook | Met Search | Met Directory | Software | 


Godzilla’s Home Page 


Godzilla finally dies in the 22nd Godzilla movie 
"which is hoped to be the greatest G-movie ever. 
Toho Studios have expressed their desire to make a serious film 

















Surf 's up, Web-heads. I’ve got a great Web design tip for you. I’m 
going to show you how to create an irregularly shaped, soft-edged 


graphic that looks good on your Web pages. 





1. Open the image you want 
to use. Make sure that the 
image is a 72-ppi RGB image 
displayed at a 1:1 magnifica- 
tion. (This is how the image 
will appear on the Web.) If 
it’s already an indexed color 
file, convert it to RGB mode 
for this technique. Double- 
click the lasso tool and 
increase the Feather value. 

(I used 10.) Make sure that 
Anti-aliasing is checked. 


2. Make a selection around 
the image or area that you 
want to appear on your Web 
page. Hold down the Alt/ 
Option key to constrain the 
lasso tool to straight lines. 
Note that the pen tool is a 
great means for making a 
more complex selection, since 
you can edit your pen tool 
path before you convert it to 
a selection. Choose Select > 


Inverse to invert the selection. 


3. If this is a single-layered 
document, double-click the 
Background layer in the 
Layers palette and give the 
layer a new name. 


Zi Weblllustration.ped @ 100% [RGE] Ele 


fa ES 
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Feather: No pinels s Anti-aliased | 


| Layers X, Channel i, Paths s, 


Opacity: 
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[Preserve Transparency 





Shortcuts 
Throughout this 
document,"Alt/Option" 
means Alt on Win- 
dows and Option on 
the Mac. 


Layer Redefinition 
Redefining the 
Background layer as a 
non-background layer 
lets you delete to 
transparent instead of 
to the background 
color. 





CREATING IMAGES WITH A SOFT EDGE 


4. Youre now ready to export 
the image to GIF. Choose File 
> Export > GIF89a Export. If 
the filter doesn’t appear in the 
Export submenu, reinstall the 
filter or check your Plug-in 
Preferences to make sure that 
the correct plug-ins folder is 
selected. Click the Transpar- 
ency color box and select 
your transparency color if it 
is something other than the 
standard Netscape gray. 


5. Preview the image and 
experiment with reducing 
the number of colors in the 
Adaptive palette. The fewer 
the colors in the image, the 
smaller and faster the image 
will be for display and when 
downloaded over the Web. 
With larger images, choosing 
fewer colors can make a big 
difference in file size; with 
smaller images, the differ- 
ence is less significant. 


6. To finish, click OK in the 
GIF89a Export dialog box to 
export the file. Notice that 
the name of the file has been 
appended with the extension 
.gif. Be sure to save the file 
with a nice short name with 
no spaces so that it is com- 
patible across multiple 
computer environments. 
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Export GIF89 
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Save in: 


File name: [w'eblliustration. gif 
Save as type: [Compuserve GIF [aif] ie -| Cancel | 





cl Weblilietal GIF89a Export Preview 


Zoom Level: 1: 1 
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